<!--
@Description:表单行
@Author:zqy
@Date:2022-10-30 11:02:29
@Last Modified by:zqy
@Last Modified time:2022-10-30 11:02:29
-->
<template>
  <div class="c-cell" :class="[cellClassName,{'flex-column':isColumn,'no-border':border===false}]" @click.stop="clickHandle">
    <template v-if="isInput">
      <van-field
        v-model="curValue"
        :label="title"
        :placeholder="placeholder"
        :required="required"
        :clickable="right"
        :readonly="readonly"
        :is-link="!!(rightIcon)?false:right"
        :left-icon="leftIcon"
        :right-icon="rightIcon"
        clearable
        v-bind="$attrs"
        :input-align="inputAlign"
        v-on="$listeners"
        @click.stop="handleFoucus"
        @clear="handleClearValue"
      />
    </template>
    <template v-else>
      <div v-if="title!==undefined && title!==null" class="label" :class="{'required':required}">{{ title }}</div>
      <div class="value" :style="{fontWeight: weight}">
        <template v-if="custom || (value && `${value}`.length>0)">
          <slot>
            <div class="text" @click.stop="directionHandle">{{ viewValue }}</div>
          </slot>
        </template>
        <div v-else class="text placeholder" @click.stop="directionHandle">
          <!-- :class="{'required':required}"  -->
          {{ readonly ? viewValue : placeholder }}
        </div>
      </div>
      <template v-if="right && !readonly">
        <slot name="right">
          <van-icon class="icon" name="arrow" @click.native.stop="directionHandle" />
          <!-- <svg-icon class="icon" icon-class="xiangyou" @click.native.stop="directionHandle" /> -->
        </slot>
      </template>
    </template>
  </div>
</template>
<script>
import { getDictByType } from '@/apis/dataDict'
const none = [undefined, null, '']
export default {
  name: 'ListCell',
  props: {
    title: {
      type: String,
      default: undefined
    },
    value: {
      type: [String, Number, Array],
      default: ''
    },
    right: {
      type: Boolean,
      default: true
    },
    weight: {
      type: String,
      default: '400'
    },
    isColumn: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    placeholderColor: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    custom: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    isInput: {
      type: Boolean,
      default: false
    },
    clickInput: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: String,
      default: ''
    },
    dictTypeCode: {
      // 数据字典类型编码
      type: String,
      default: ''
    },
    cellClassName: {
      type: String,
      default: ''
    },
    leftIcon: {
      type: String,
      default: ''
    },
    rightIcon: {
      type: String,
      default: ''
    },
    inputAlign: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      curValue: '',
      dictValue: ''
    }
  },
  computed: {
    viewValue() {
      if (!none.includes(this.dictValue)) {
        return this.dictValue
      }
      if (!none.includes(this.value)) {
        return this.value instanceof Array ? this.value.join(',') : this.value
      }
      return this.defaultValue
    }
  },
  watch: {
    value: {
      handler(n, o) {
        this.curValue = n
        if (none.includes(n)) return ''
        if (none.includes(this.dictTypeCode)) return n
        if (!(n instanceof Array)) {
          n = `${n}`.split(',')
        }
        const t = []
        const params = { dictTypeCode: this.dictTypeCode }
        getDictByType(params).then(resData => {
          for (const code of n) {
            if (!none.includes(code)) {
              for (const item of resData) {
                if (item.dictCode.toString() === code.toString()) {
                  t.push(item.dictName)
                  continue
                }
              }
            }
          }
          this.$set(this.$data, 'dictValue', t.join(','))
        })
      },
      immediate: true
    }
  },
  methods: {
    clickHandle() {
      this.$emit('click')
    },
    directionHandle() {
      this.$emit('right')
    },
    handleFoucus() {
      if (this.right || this.clickInput) {
        this.directionHandle()
      }
    },
    handleClearValue() {
      this.curValue = ''
      this.$emit('input', '')
      this.$emit('clear')
    }

  }
}
</script>
<style lang="less" scoped>
.c-cell{
  position: relative;
  padding: 14px 16px;
  min-height: 52px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  &::after{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    left:16px;
    right:16px;
    bottom: 0;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
  &.no-border::after{
    border-bottom: 0;
  }
  /deep/.van-cell--clickable:active{
    background: #fff;
  }
  /deep/.van-cell{
    padding: 0;
    background: transparent;
    .van-field__label{
      width: auto;
      min-width: 70px;
      margin-right: 16px;
      font-size: 14px;
      color: #3C4458;
    }
    .van-field__control{
      font-size: 14px;
      color: #3C4458;
    }

    &.van-cell--required::before{
      left: -8px;
    }
  }
  .label{
    min-width: 70px;
    line-height: 20px;
    font-size: 14px;
    color: #3C4458;
    margin-right: 16px;
    flex: 0 0 auto;
    position: relative;
    &.required::before{
      content: '*';
      position: absolute;
      left: -8px;
      top: 3px;
      color: #ee0a24;
    }
  }
  .value{
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 14px;
    color: #3C4458;
    text-align: right;
    .text{
      display: block;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      &.placeholder{
        color: #B5B7C4;
      }
      &.required{
        color: #ee0a24;
      }
    }
  }
  .icon{
    margin-left: 4px;
    flex: 0 0 16px;
    font-size: 16px;
    font-weight: bold;
    color: rgba(136, 136, 136, 1);
  }
  &.flex-column{
    display: block;
    position: relative;
    .label{
      margin-bottom: 10px;
    }
    .value{
      text-align: left;
      .text{
        text-align: left;
        overflow: auto;
        text-overflow:inherit;
        white-space:normal;
      }
    }
    .icon{
      position: absolute;
      right: 0;
      top: 2px;
    }
  }
}
</style>
